﻿<div ng-controller="ClientAccessController">
    <div style="width:400px; margin:0 auto;">
        <form class="form-horizontal" name="clientAccessForm" ng-init="setForm('clientAccessForm')" ng-submit="submitForm()" novalidate>
            <div class="form-group">
                <h2 style="text-align:center; text-transform:uppercase;">{{item.header}}</h2>
            </div>
            <div class="form-group" ng-class="{ 'has-error' : clientAccessForm.clientGroup.$invalid && !clientAccessForm.clientGroup.$pristine }">
                <!-- Single button -->
                <div class="btn-group">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-cubes"></i></div><input type="text" class="form-control text-uppercase" name="clientGroup" placeholder="{{item.placeholder.clientGroup}}" maxlength="3" tabindex="1" required ng-minlength="3" ng-model="data.clientGroup" directive-auto-focus />
                    </div>
                    <p ng-show="clientAccessForm.clientGroup.$error.required && !clientAccessForm.clientGroup.$pristine" class="help-block">{{item.error.required.clientGroup}}</p>
                    <p ng-show="clientAccessForm.clientGroup.$error.minlength" class="help-block">{{item.error.minlength.clientGroup}}</p>
                </div>
            </div>
            <div class="form-group" ng-class="{ 'has-error' : clientAccessForm.username.$invalid && !clientAccessForm.username.$pristine }">
                <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-user"></i></div><input type="text" class="form-control" name="username" placeholder="{{item.placeholder.username}}" tabindex="2" required ng-minlength="1" ng-model="data.username" />
                </div>
                <p ng-show="clientAccessForm.username.$error.required && !clientAccessForm.username.$pristine" class="help-block">{{item.error.required.username}}</p>
                <p ng-show="clientAccessForm.username.$error.minlength" class="help-block">{{item.error.minlength.username}}</p>
            </div>
            <div class="form-group" ng-class="{ 'has-error' : clientAccessForm.password.$invalid && !clientAccessForm.password.$pristine }">
                <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-key"></i></div> <input type="password" class="form-control" name="password" placeholder="{{item.placeholder.password}}" tabindex="3" required ng-minlength="1" ng-model="data.password" ng-keydown="keydown($event)" />
                </div>
                <p ng-show="clientAccessForm.password.$error.required && !clientAccessForm.password.$pristine" class="help-block">{{item.error.required.password}}</p>
                <p ng-show="clientAccessForm.password.$error.minlength" class="help-block">{{item.error.minlength.password}}</p>
            </div>
            <div class="form-group">
                <div class="checkbox pull-left">
                    <label>
                        <input type="checkbox" ng-model="data.remember"> {{item.remember}}
                    </label>
                </div>
                <button type="submit" class="btn btn-primary pull-right" tabindex="4" directive-end-index="clientAccessForm" ng-disabled="clientAccessForm.$invalid"><span class="fa fa-sign-in" aria-hidden="true"></span>&nbsp;&nbsp;{{item.submit}}</button>
            </div>
            <div class="form-group" ng-hide="submiting">
                <hr />
                {{item.forget}} <a href="javascript:void(0)" class="text-red">{{item.clickHere}}</a>

            </div>
            <div class="form-group" ng-show="submiting">
                <span class="text-primary">Signing you in, please wait...</span>
                <div>
                    <img src="images/loadingbar-blue.gif" width="100%" height="10px" />
                </div>
            </div>
        </form>
    </div>
</div>